Design Area

The Design Area is a dynamic visual workspace where you create and manage application workflows.

Features

• Drag nodes from the Left Sidebar and drop them into the canvas.
• Connect nodes with edges to define data flow or actions.
• Interactive controls to rearrange, zoom, or delete elements.

React Flow Features

1. Node Manipulation:

   • Drag and position nodes freely.
   • Resize nodes as needed.

2. Edge Management:

   • Create edges by clicking and dragging between nodes.
   • Remove edges by selecting them and pressing delete.

3. Interactive Tools:

   • Pan and zoom for better visibility.
   • Undo/redo actions for error correction.

How to Use

1. Drag a node from the Left Sidebar into the Design Area.
2. Create edges by connecting nodes.
3. Click on a node or edge to view configuration options in the Right Sidebar.